<template>
	<view class="personal">
		<view>
			<u-form :model="form" ref="uForm">
				<view class="title">
					个人信息*
				</view>
				<view class="form_box">
					<u-form-item label="国家/地区" prop="country" label-width='auto'>
						<u-input v-model="form.country" />
					</u-form-item>
					<u-form-item label="姓名" label-width='auto' prop="trueName">
						<u-input v-model="form.trueName" />
					</u-form-item>
				</view>
				<view class="title">
					护照信息*
				</view>
				<view class="form_box">
					<u-form-item label="护照编号" label-width='auto' prop="passportNum">
						<u-input v-model="form.passportNum" />
					</u-form-item>
					<u-form-item label-width='auto'>
						<view class="upload_box">
							<view class="upload_item">
								<hyUpload  :defaultUrl='form.passportJust' @onSuccess='onSuccessPassport'></hyUpload>
								<text>护照照片</text>

							</view>
							<view class="upload_item">
								<hyUpload :defaultUrl='form.passportHold' @onSuccess='onSuccessPassportHold'></hyUpload>
								<text>手持护照照片</text>

							</view>
							<view class="upload_item"></view>
						</view>
					</u-form-item>

				</view>
				<view class="title">
					驾照信息*
				</view>
				<view class="form_box">
					<u-form-item label="驾照编号" label-width='auto'>
						<u-input v-model="form.drivingNum" />
					</u-form-item>
					<u-form-item label-width='auto'>
						<view class="upload_box">
							<view class="upload_item">
								<hyUpload  :defaultUrl='form.drivingJust' @onSuccess='onSuccessDriving'></hyUpload>
								<text>驾照照片</text>

							</view>
							<view class="upload_item">
								<hyUpload :defaultUrl='form.drivingHold' @onSuccess='onSuccessDrivingHold'></hyUpload>
								<text>手持驾照照片</text>

							</view>
							<view class="upload_item"></view>
						</view>
					</u-form-item>

				</view>
				<view class="title">
					社保卡信息*
				</view>
				<view class="form_box">
					<u-form-item label="社保卡号" label-width='auto' prop="securityNum">
						<u-input v-model="form.securityNum" />
					</u-form-item>
					<u-form-item label-width='auto'>
						<view class="upload_box">
							<view class="upload_item">
								<hyUpload :defaultUrl='form.securityJust' @onSuccess='onSuccesSsecurityImg'></hyUpload>
								<text>社保卡照片</text>

							</view>
							<view class="upload_item">
								<hyUpload :defaultUrl='form.securityHold' @onSuccess='onSuccesSsecurityHold'></hyUpload>
								<text>手持社保卡照片</text>

							</view>
							<view class="upload_item"></view>
						</view>
					</u-form-item>

				</view>
				<view class="title">
					其他有效证件*
				</view>
				<view class="form_box">
					<u-form-item label="证件类型" label-width='auto'>
						<u-input v-model="form.otherPapersType" />
					</u-form-item>
					<u-form-item label="证件编号" label-width='auto'>
						<u-input v-model="form.otherPapersNumber" />
					</u-form-item>
					<u-form-item label-width='auto'>
						<view class="upload_box">
							<view class="upload_item">
								<hyUpload :defaultUrl='form.otherPapersJust' @onSuccess='onSuccessOterPapers'></hyUpload>
								<text>正面照片</text>

							</view>
							<view class="upload_item">
								<hyUpload :defaultUrl='form.otherPapersSide' @onSuccess='onSuccessOterPapersJus'></hyUpload>
								<text>反面照片</text>

							</view>
							<view class="upload_item">

								<hyUpload :defaultUrl='form.otherPapersHold' @onSuccess='onSucceccOterPapersHold'></hyUpload>
								<text>手持证件照片</text>

							</view>
						</view>
					</u-form-item>
				</view>


				<view class="title">
					地址信息
				</view>
				<view class="form_box">
					<u-form-item label="详细地址" prop="address" label-width='auto'>
						<u-input v-model="form.address" />
					</u-form-item>

					<u-form-item label-width='auto'>

						<hyUpload :defaultUrl='form.addressImg' @onSuccess='onSuccessAddress'></hyUpload>
						<text>请上传银行流水，账单，租约等地址证明</text>
					</u-form-item>
				</view>



				<view class="title">
					资金来源证明（大额交易）
				</view>
				<view class="form_box">

					<u-form-item label-width='auto'>
						<view class="upload_box">
							<view class="upload_item">
								<hyUpload :defaultUrl='form.sourceImg' @onSuccess='onSuccessSource'></hyUpload>
								<text>证明照片</text>
							</view>
						</view>
					</u-form-item>

				</view>
				<view class="title">
					其他相关资料
				</view>
				<view class="form_box">

					<u-form-item label-width='auto'>
						<view class="upload_box">
							<view class="upload_item">
								<hyUpload :defaultUrl='form.otherImg' @onSuccess='onSuccessOther'></hyUpload>
								<text>证明照片</text>
							</view>
						</view>
					</u-form-item>

				</view>
			</u-form>
		</view>
		<u-calendar v-model="calendarShow" @change='changeDate' :mode="'date'"></u-calendar>
		<view class="submit">
			<u-button @click="submit" type="success">提交</u-button>
		</view>

	
	</view>
</template>

<script>
	import hyUpload from '@/components/hy-upload/hy-upload.vue'
	export default {
		components: {
			hyUpload
		},
		data() {
			return {

				calendarShow: false,

				action: 'http://www.example.com/upload',
				fileList: [],
				form: {
					address: '', //'详细地址',
					addressImg: '', //'地址证明',
					drivingHold: '', // '手持驾照照片',
					drivingJust: '', //'驾照照片',
					drivingNum: '', // '驾照编号',
					oddNumbers: '', // '申请单编号',
					otherImg: '', //'其他证明照片',
					passportHold: '', // '手持护照照片',
					passportJust: '', // '护照照片',
					passportNum: '', // '护照编号',
					securityHold: '', // '社保手持照片',
					securityJust: '', //'社保照片',
					securityNum: '', //'社保卡号',
					sourceImg: '', //'资金来源证明',
					trueName: '', // '名字'
					country: '', //国家地区
					otherPapersHold: '', //其他手持
					otherPapersJust: '', //其他正面
					otherPapersSide: '', //其他反面
					shareholderId:'',//持股人id
					directorId:''//董事id
				},
				apiName:'',
				rules: {
					trueName: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					country: [{
						required: true,
						message: '请输入国家/地区',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					securityNum: [{
						required: true,
						message: '请输入社保卡卡号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					passportNum: [{
							required: true,
							message: '请输入护照编号',
							trigger: ['change', 'blur'],
						},

					],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: ['change', 'blur'],
					}],
				},

			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		async onLoad(e) {
			if (e) {
				console.log(e)
				const id = e.shareholderId || e.directorId
				this.apiName = e.name
				const detailsName = e.detailsName
				const res = await this.$u.api[detailsName]({
					id
				})
				console.log(res)
				//股东
				if (res.companyShareholderNonMainland) {
					this.form = res.companyShareholderNonMainland
				}
				//董事
				if(res.companyDirectorNonMainland){
					this.form = res.companyDirectorNonMainland
				}
				this.form.shareholderId = e.shareholderId
				this.form.directorId = e.directorId
			
			}
		},
		methods: {
		
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						if (this.isUploadImg()) {
							//董事
							let newForm = {}
							if (this.apiName == 'addCompanyDirectorInfo') {
								newForm = {
									accountType: 2,
									companyDirectorMainland: {},
									companyDirectorNonMainland: this.form
								}
							} else {
								//股东
								newForm = {
									accountType: 2,
									companyShareholderMainland: {},
									companyShareholderNonMainland: this.form
								}
							}
							const res = await this.$u.api[this.apiName](newForm)
							uni.navigateBack({
							
							})
						}

					} else {
						console.log('验证失败');
					}
				});
			},
			isUploadImg() {


				if (!this.form.passportHold) {
					uni.showToast({
						title: '请上传手持护照照片',
						icon: 'none'
					})
					return false
				}
				if (!this.form.passportJust) {
					uni.showToast({
						title: '请上传护照照片',
						icon: 'none'
					})
					return false
				}
				if (!this.form.securityJust) {
					uni.showToast({
						title: '请上传社保照片',
						icon: 'none'
					})
					return false
				}
				if (!this.form.securityHold) {
					uni.showToast({
						title: '请上传手持社保照片',
						icon: 'none'
					})
					return false
				}
				if (!this.form.addressImg) {
					uni.showToast({
						title: '请上传地址证明',
						icon: 'none'
					})
					return false
				}
				return true



			},
			//其他 正面
			onSuccessOterPapers(res) {
				this.form.otherPapersJust = res.data
			},
			//其他手持
			onSucceccOterPapersHold(res) {
				this.form.otherPapersHold = res.data
			},
			// 其他 反面
			onSuccessOterPapersJus(res) {
				this.form.otherPapersSide = res.data
			},
			// 地址证明
			onSuccessAddress(res) {
				this.form.addressImg = res.data
			},
			// 护照
			onSuccessPassport(res) {
				this.form.passportJust = res.data
			},
			// 手持护照
			onSuccessPassportHold(res) {
				this.form.passportHold = res.data
			},
			// 驾照
			onSuccessDriving(res) {
				this.form.drivingJust = res.data
			},
			// 手持驾照
			onSuccessDrivingHold(res) {
				this.form.drivingHold = res.data
			},
			// 社保卡照片
			onSuccesSsecurityImg(res) {
				this.form.securityJust = res.data
			},
			// 社保卡手持照片
			onSuccesSsecurityHold(res) {
				this.form.securityHold = res.data
			},
			// 资金来源照片
			onSuccessSource(res) {
				this.form.sourceImg = res.data
			},
			// 其他照片
			onSuccessOther(res) {
				this.form.otherImg = res.data
			},
			// 银行卡有效期
			changeDate(e) {
				this.form.bankValidity = e.result || ''
			},


		}
	}
</script>

<style lang="scss">
	.personal {
		padding-bottom: 60rpx;

		.submit {
			z-index: 888;
			width: 100%;
			background-color: #f7f7f7;
			padding: 30rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
		}

		.upload_box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.upload_item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.form_box {
			padding: 0 30rpx;
			box-sizing: border-box;
		}

		.title {
			background-color: #f7f7f7;
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
	}
</style>
